<template>
  <el-table
    :data="orderDetailed"
    @header-dragend="changeColWidth"
    border
    stripe
  >
    <el-table-column
      v-for="(item, index) in tableList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :width="item.width"
      :column-key="item.prop"
      :filters="item.filters"
      :filter-method="item.filter_method"
    >
      <template slot-scope="scope">
        <template v-if="scope.$index == 0">
          <el-input v-model="scope.row[item.prop]"></el-input>
        </template>
        <template v-else>
          <span>{{ scope.row[item.prop] }}</span>
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    // 定义一个名为 rawLeftTableData 的 prop，类型为 Array
    rawLeftTableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableList: [
        { label: "客户编号", prop: "cust_id", width: 180, state: true },
        { label: "许可证号", prop: "licence_no", width: 180, state: true },
        { label: "店铺名称", prop: "store_name", width: 180, state: true },
        { label: "法人", prop: "artificial_person", width: 180, state: true },
        {
          label: "创建时间",
          prop: "created_time",
          type: "date",
          width: 300,
          state: true,
        },
        {
          label: "周期",
          prop: "periods",
          width: 180,
          state: true,
          filters: [
            { text: "第一阶段", value: "7:1" },
            { text: "第二阶段", value: "7:2" },
            { text: "第三阶段", value: "7:3" },
            { text: "第四阶段", value: "7:4" },
          ],
          filter_method: this.periodshandle,
        },
        {
          label: "销售额",
          prop: "sale",
          type: "number",
          width: 180,
          state: true,
          filters: [
            { text: "sale<100", value: "100" },
            { text: "100<sale<500", value: "500" },
            { text: "500<sale<1000", value: "1000" },
            { text: "sale>1000", value: "1001" },
          ],
          filter_method: this.salehandle,
        },
      ],
      tableData: [],
      oColumn: {},
      leftFilter: {},
      orderDetailed: [],
      // rawLeftTableData: [
      //   {
      //     cust_id: "421081108943",
      //     licence_no: "421081108943",
      //     store_name: "石首市海之缘便利店",
      //     county_id: "11421008",
      //     market_id: "11421008017",
      //     artificial_person: "万敏",
      //     created_time: "11/8/2023 09:12:06",
      //     periods: "7:1",
      //     sale: "65",
      //   },
      //   {
      //     cust_id: "421023112313",
      //     licence_no: "421023112313",
      //     store_name: "娜家便利店",
      //     county_id: "11421004",
      //     market_id: "11421004008",
      //     artificial_person: "伍新光",
      //     created_time: "10/4/2020 16:16:24",
      //     periods: "7:5",
      //     sale: "200",
      //   },
      //   {
      //     cust_id: "421023112084",
      //     licence_no: "421023112084",
      //     store_name: "无",
      //     county_id: "11421004",
      //     market_id: "11421004025",
      //     artificial_person: "王汝琴",
      //     created_time: "19/9/2019 10:54:07",
      //     periods: "7:4",
      //     sale: "562",
      //   },
      //   {
      //     cust_id: "421023111766",
      //     licence_no: "421023111766",
      //     store_name: "交通便利店",
      //     county_id: "11421004",
      //     market_id: "11421004026",
      //     artificial_person: "陈永涛",
      //     created_time: "11/12/2018 12:03:21",
      //     periods: "7:1",
      //     sale: "1002",
      //   },
      //   {
      //     cust_id: "421023111813",
      //     licence_no: "421023111813",
      //     store_name: "无",
      //     county_id: "11421004",
      //     market_id: "11421004025",
      //     artificial_person: "胡超金",
      //     created_time: "25/12/2018 16:51:15",
      //     periods: "7:4",
      //     sale: "700",
      //   },
      // ],
    };
  },
  watch: {
    leftFilter: {
      handler(newVal, oldVal) {
        this.orderDetailed = this.filterTableData(
          this.leftFilter,
          this.rawLeftTableData
        );
      },
      immediate: true,
      deep: true,
    },
    rawLeftTableData() {
      this.orderDetailed = this.filterTableData(
        this.leftFilter,
        this.rawLeftTableData
      );
    },
  },
  created() {
    this.oColumn = this.getFilterData();
    this.leftFilter = Object.assign({}, this.oColumn);
    this.orderDetailed = [this.leftFilter];
  },
  methods: {
    generateTableList() {
      const rawLeftTableData = this.rawLeftTableData;
      let tableList = [];
      //提取所有唯一的键
      const keys = [...new Set(rawLeftTableData.map(Object.keys).flat())];
      // 为每个键生成 tableList 项
      keys.forEach((key) => {
        let item = {
          label: String(key),
          prop: key,
          width: 20,
          state: true,
        };

        // 为特定的键添加 filters 和 filter_method
        switch (key) {
          case "periods":
            item.filters = [
              { text: "第一阶段", value: "7:1" },
              { text: "第二阶段", value: "7:2" },
              { text: "第三阶段", value: "7:3" },
              { text: "第四阶段", value: "7:4" },
            ];
            item.filter_method = this.periodshandle;
            break;
          case "sale":
            item.type = "number";
            item.filters = [
              { text: "sale < 100", value: "100" },
              { text: "100 ≤ sale < 500", value: "500" },
              { text: "500 ≤ sale < 1000", value: "1000" },
              { text: "sale ≥ 1000", value: "1001" },
            ];
            item.filter_method = this.salehandle;
            break;
          // 可以根据需要添加更多的 case 来处理其他特殊的键
        }

        tableList.push(item);
      });

      return tableList;
    },

    changeColWidth(newWidth, oldWidth, column, event) {
      let property = column.property;
      let columns = this.tableList.map((item) => {
        if (item.prop == property) {
          item.width = parseInt(newWidth); // 取整
        }
        return item;
      });
      // 调接口保存
    },
    getFilterData() {
      let oColumn = {};
      this.tableList.forEach((item) => {
        oColumn[item.prop] = "";
      });
      return oColumn;
    },
    filterTableData(oFilter, tableData) {
      let data = tableData.filter((item) => {
        for (let i = 0, length = this.tableList.length; i < length; i++) {
          let col = this.tableList[i];
          let type = col.type || "string";
          let prop = col.prop;
          let filterVal = oFilter[prop];
          let itemVal = item[prop] || " ";
          if (type == "string" || type == "date") {
            if (filterVal && String(itemVal).indexOf(filterVal) == -1) {
              return false;
            }
          } else if (type == "enum") {
            if (filterVal && itemVal != filterVal) {
              return false;
            }
          } else if (type == "number") {
            if (filterVal != "") {
              let isMatch = false;
              let matchList = filterVal.indexOf(",")
                ? filterVal.split(",")
                : [filterVal];
              for (let i = 0, length = matchList.length; i < length; i++) {
                if (matchList[i] && itemVal.indexOf(matchList[i]) != -1) {
                  isMatch = true;
                }
              }
              if (!isMatch) {
                return false;
              }
            }
          }
        }
        return true;
      });
      data.unshift(oFilter);
      return data;
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    salehandle(value, row, column) {
      const property = column["property"];
      if (value === "100") {
        return row[property] <= 100;
      } else if (value === "500") {
        return row[property] > 100 && row[property] <= 500;
      } else if (value === "1000") {
        return row[property] > 500 && row[property] <= 1000;
      } else if (value === "1001") {
        return row[property] > 1000;
      }
    },
    periodshandle(value, row, column) {
      const property = column["property"];

      return row[property] === value;
    },
  },
};
</script>

<style scoped>
</style>